<template>
  <div style="display: inline-block">
    <RPButton :disabled="disabled" optType="create" type="info" @click="selectFile" text="导入" />
    <input type="file" ref="selectFile" style="display:none" @change="importData" />
  </div>
</template>
<script>
import coverApi from '@/api/cover.js'
export default {
  name: 'uploadFile',
  props: {
    url: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    },
    parentCode: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tableCode: ''
    }
  },
  methods:{
    selectFile() {
      // this.$Message.error({
      //   content: '功能开发中',
      //   duration: 3
      // })
       this.$refs.selectFile.click();
      
    },
    checkFileType(fileType) {
      const acceptTypes = ["xlsx"];
      for (var i = 0; i < acceptTypes.length; i++) {
        if (fileType === acceptTypes[i]) {
          return true;
        }
      }
      return false;
    },
    importData(e) {
      const inputCom = e.target;
      const files = inputCom.files;
      let param = new FormData();
      [].forEach.call(files, file => {
        if (!this.checkFileType(file.name.split(".").pop())) {
          this.$message.error({
            content: '导入文件格式不正确，只支持导入.xlsx文件',
            duration: 3
          });
          return false;
        } else {
          param.append("file", file);
          param.append("name", 'files');
          param.append("filename", file.name);
        }
      });

      if (param.get("file")) {
        //添加请求头
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };

        this.showUploading();
        // 导入接口
        $http
          .post(`${this.url}`, param, (response) => {
            this.$message.error({
              content: '导入失败',
              duration: 3
            });
            inputCom.value = "";
            this.hideUploading();
          }, config)
          .then((response) => {
            if (response && response.data && response.data.code == 200) {
              inputCom.value = "";
              this.$message.success({
                content: '导入成功',
                duration: 3
              });
              this.$emit('uploadSuccess')
              this.hideUploading();
            } else if (response && response.data && (response.data.code == 40010 || response.data.code == 40011)) {
              inputCom.value = "";
              this.$message.error({
                content: response.data.msg,
                duration: 3
              });
              this.$emit('uploadSuccess')
              this.hideUploading();
            } else {
               inputCom.value = "";
              this.$message.error({
                content: response.data.msg,
                duration: 3
              });
              this.$emit('uploadSuccess')
              this.hideUploading();
            }
          })
      }
    },
    hideUploading() {
      this.$Spin.hide();
    },
    showUploading() {
      this.$Spin.show({
        render: h => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18
              }
            }),
            h("div", '数据导入中')
          ]);
        }
      });
    },
  }
}
</script>
